<template>
	<view class="main" v-if="detail">
		<view class="steps">
			<u-steps :list="numList" :current="current" mode="number"></u-steps>
		</view>
		<view class="mapbox">
			<map style="width: 100%; height: 520rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
				:show-location="true"></map>
		</view>
		<view class="distance">
			<view class="num">
				{{detail.distance_infor.distance_price}}元 <text>里程费用</text>
			</view>
			<view class="fg"></view>
			<view class="num">
				{{detail.distance_infor.distance}}km <text>直线距离</text>
			</view>
		</view>
		<view class="address">
			<view class="steps">
				<view>取</view><text></text>
				<view>送</view>
			</view>
			<view class="name">
				<view class="view">
					<view class="view1">{{detail.start_infor.start_address}}</view>
					<view class="text">{{detail.start_infor.start_address_detail}}</view>
					<view class="text">{{detail.start_infor.start_name}}
						{{detail.start_infor.start_mobile}}
					</view>
				</view>
				<view class="view">
					<view class="view1">{{detail.end_infor.end_address}}</view>
					<view class="text">{{detail.end_infor.end_address_detail}}</view>
					<view class="text">{{detail.end_infor.end_name}}
						{{detail.end_infor.end_mobile}}
					</view>
				</view>
			</view>
			<view class="distances">
				<view class="btn">
					<view
						@click="handerdan(detail.start_infor.start_address,detail.start_infor.start_lng,detail.start_infor.start_lat)">
						<i class="iconfont icon-daohang"></i>导航</view>
					<view @click="handphone(detail.start_infor.start_mobile)"><i
							class="iconfont icon-eLoudspeaker"></i>电话</view>
				</view>
				<view class="btn">
					<view
						@click="handerdan(detail.end_infor.end_address,detail.end_infor.end_lng,detail.end_infor.end_lat)">
						<i class="iconfont icon-daohang"></i>导航</view>
					<view @click="handphone(detail.end_infor.end_mobile)"><i class="iconfont icon-eLoudspeaker"></i>电话
					</view>
				</view>
			</view>
		</view>
		<view class="orderinfo">
			<view class="title">订单信息</view>
			<view class="li">
				订单状态：<view>{{type=='stay_take'?'待取送':''}}{{type=='in_send'?'配送中':''}}{{type=='end'?'配送完成':''}}</view>
			</view>
			<view class="li">
				商家地址：{{detail.start_infor.start_address_detail}}
			</view>
			<view class="li">
				收货地址：{{detail.end_infor.end_address_detail}}
			</view>
			<view class="li">
				下单时间：<text>{{detail.run_time.start_time}}</text>
			</view>
		</view>
		<view class="orderinfo">
			<view class="li">
				期望到达时间：<view>{{detail.expect_time}}</view>
			</view>
			<view class="title">订单备注</view>
			<textarea disabled :value="detail.remark" />
		</view>
		<view class="moneyInfo">
			<view class="list">
				<view class="title">价格信息</view>
				<view class="title">名称</view>
				<view class="title">价格</view>
			</view>
			<view class="list">
				<view class="title">{{detail.goods.g_name}}</view>
				<view class="blue">¥{{detail.goods.weight_price}}</view>
			</view>
			<view class="list">
				<view class="text">优惠券：</view>
				<view class="text">{{detail.coupon_infor.c_name}}</view>
				<view class="blue">¥{{detail.coupon_infor.coupon_price}}</view>
			</view>
			<view class="list">
				<view class="text">天气补助：</view>
				<view class="blue">¥{{detail.tip}}</view>
			</view>
			<view class="list">
				<view class="text">小费：</view>
				<view class="blue">¥{{detail.tip}}</view>
			</view>
			<view class="list">
				<view class="text">里程费：</view>
				<view class="blue">¥{{detail.distance_infor.distance_price}}</view>
			</view>
			<view class="list">
				<view class="text">合计：</view>
				<view class="red">¥{{detail.pay_price}}</view>
			</view>
			<view class="btns" v-if="type=='stay_take'">
				<view @click="handphone(detail.start_infor.start_mobile)">联系商家</view>
				<view class="btn1" @click="handshop(id)">确认到店</view>
			</view>
			<view class="btns" v-if="type=='in_send'">
				<view @click="handphone(detail.end_infor.end_mobile)">致电买家</view>
				<view class="btn1" @click="handservice(id)">确认送达</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: '待抢单'
				}, {
					name: '待取货'
				}, {
					name: '配送中'
				}, {
					name: '已完成'
				}, ],
				current: 0,
				id: '',
				type: '',
				detail: '',
				markers: [],
				latitude: 39.909,
				longitude: 116.39742,
			};
		},
		onLoad(option) {
			var that = this
			that.id = option.id
			that.type = option.type
			if (option.type == 'stay_take') that.current = 1
			if (option.type == 'in_send') that.current = 2
			if (option.type == 'end') that.current = 3
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					that.handerMyaddress()
				}
			});
		},
		methods: {
			// 当前地址
			handerMyaddress() {
				var that = this
				var markers_new = [];
				markers_new.push({
					id: 99999,
					width: 45,
					height: 53,
					iconPath: '../../../static/images/myaddress.png',
					latitude: that.latitude,
					longitude: that.longitude,
				})
				that.markers = markers_new;
				that.handData()
			},
			// 导航
			handerdan(addrname, dhlongitude, dhlatitude) {
				let hasAmap = plus.runtime.isApplicationExist({
					pname: 'com.autonavi.minimap',
					action: 'androidamap://'
				});
				let urlAmap = "androidamap://viewMap?sourceApplication=appname&poiname=" + addrname + "&lon=" +
					dhlongitude + "&lat=" + dhlatitude + "&dev=0"
				if (hasAmap) {
					plus.runtime.openURL(urlAmap);
				} else {
					plus.nativeUI.alert("本机未安装指定的地图应用");
					// url = "geo:"+latitude+","+longitude+"?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";
					// plus.runtime.openURL(url); //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差  
				}

			},
			handphone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 确认到店
			handshop(id) {
				global.$http.request({
					url: '/api/rider_order/q_take',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id,
					}
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							mask: true,
							duration: 1000
						})
						setTimeout(function() {
							uni.switchTab({
								url: '../../indexs/index/index'
							})
						}, 1000)
					}
				})
			},
			// 确认送达
			handservice(id) {
				global.$http.request({
					url: '/api/rider_order/q_delivery',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id,
					}
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							mask: true,
							duration: 1000
						})
						setTimeout(function() {
							uni.switchTab({
								url: '../../indexs/index/index'
							})
						}, 1000)
					}
				})
			},
			// 详情
			handData() {
				global.$http.request({
					url: '/api/rider_order/detail',
					data: {
						token: uni.getStorageSync('token'),
						order_id: this.id,
						type: this.type
					}
				}).then(res => {
					this.detail = res.data.data
					var markers_new = [{
							id: 1,
							width: 40,
							height: 40,
							iconPath: '../../../static/images/rise.png',
							latitude: res.data.data.start_infor.start_lat,
							longitude: res.data.data.start_infor.start_lng,
						},
						{
							id: 2,
							width: 40,
							height: 40,
							iconPath: '../../../static/images/end.png',
							latitude: res.data.data.end_infor.end_lat,
							longitude: res.data.data.end_infor.end_lng,
						}
					];
					this.markers = this.markers.concat(markers_new)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;

		.main {
			display: flex;
			align-items: center;
			flex-direction: column;

			.steps {
				width: 750rpx;
				height: 120rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;

				.u-steps {
					width: 650rpx;
				}
			}

			.mapbox {
				width: 750rpx;
				height: 520rpx;
			}

			.distance {
				width: 710rpx;
				height: 120rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(116, 116, 116, 0.3);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				margin-top: -60rpx;

				.num {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 32rpx;
					color: #3285FF;

					text {
						font-size: 24rpx;
						color: #808080;
					}
				}

				view:last-child {
					color: #F3444B;
				}

				.fg {
					width: 2rpx;
					height: 80rpx;
					background-color: #B3B3B3;
				}
			}

			.address {
				width: 710rpx;
				height: 240rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(116, 116, 116, 0.3);
				border-radius: 20rpx;
				display: flex;
				align-items: flex-start;
				flex-direction: row;
				justify-content: space-between;
				padding: 20rpx;
				margin-top: 20rpx;

				.steps {
					height: 150rpx;
					width: 50rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					view {
						width: 40rpx;
						height: 40rpx;
						background: #3BDCAA;
						border-radius: 50%;
						background-color: #3BDCAA;
						font-size: 20rpx;
						color: #F0F3F8;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					view:last-child {
						background: #F3444B;
					}

					text {
						display: block;
						width: 1rpx;
						height: 60rpx;
						border: 1rpx dashed #F0F3F8;
					}
				}

				.name {
					width: 450rpx;
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.view {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 90rpx;

						.view1 {
							overflow: hidden;
							width: 450rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 28rpx;
							color: #000;
						}

						.text {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							width: 450rpx;
							font-size: 22rpx;
							color: #808080;
							margin-top: 5rpx;
							display: inline-flex;
						}
					}
				}

				.distances {
					height: 195rpx;
					width: 120rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: space-between;

					.btn {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						width: 120rpx;

						view {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-size: 24rpx;
							color: #000;

							.iconfont {
								font-size: 45rpx;
								color: #1DBE61;
							}
						}
					}
				}

			}

			.orderinfo {
				width: 750rpx;
				background: #FFFFFF;
				padding: 10rpx 20rpx;
				margin-top: 20rpx;

				.title {
					font-size: 32rpx;
					color: #000;
					padding: 10rpx 0;
				}

				.li {
					display: flex;
					padding: 10rpx 0;
					font-size: 30rpx;
					color: #666666;

					view {
						color: #32ABFA;
					}

					text {
						color: #000000;
					}
				}

				textarea {
					width: 670rpx;
					height: 80rpx;
					background: #F7F7F7;
					border-radius: 20rpx;
					padding: 20rpx;
				}
			}

			.moneyInfo {
				width: 750rpx;
				background: #FFFFFF;
				padding: 10rpx 20rpx;
				margin-top: 20rpx;

				.list {
					width: 710rpx;
					padding: 10rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 30rpx;

					.title {
						font-size: 32rpx;
						color: #000;
					}

					.text {
						color: #666;
					}

					.blue {
						color: #32ABFA;
					}

					.red {
						color: #F3444B
					}
				}

				.btns {
					width: 710rpx;
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;

					view {
						width: 220rpx;
						height: 68rpx;
						border: 1rpx solid #1DBE61;
						border-radius: 10rpx;
						margin: 0 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #1DBE61;
						font-size: 28rpx;
					}

					.btn1 {
						color: #fff;
						background-color: #1DBE61;
					}
				}
			}
		}
	}
</style>
